


/* 获取元素 */
reginPut = document.querySelectorAll('.reginput')
reBoxP = document.querySelectorAll('.re-box-p')
let check = document.querySelector('.check')
let regBtn = document.querySelector('.regbtn')
let clear = document.querySelectorAll('.clear')
let inputText = document.querySelectorAll('#inputtext')
console.log(inputText)
/* 需求1: 用户输入表单时对表单进行验证, 在失去焦点时进行验证 */
let regArr = [
    /^[a-zA-Z]\w{5,11}$/,
    /^1[3456789][0-9]{9}$/,
    /^[a-zA-Z]\w{3}$/,
    /^[a-zA-Z]\w{5,11}$/
]

reginPut.forEach(function (dom, i) {
    dom.addEventListener('blur', function () {
        //console.log(1)
        let bool = regArr[i].test(dom.value)
        if (bool) {
            reBoxP[i].style.display = 'none'
        } else {
            reBoxP[i].style.display = 'block'
        }
    })
})


/* 需求: 点击立即注册按钮,进行表单验证 */
regBtn.addEventListener('click', function () {
    reginPut.forEach(function (v, i) {
        let bool = regArr[i].test(v.value)
        if(bool){
            reBoxP.style.display = 'none'
        }else{
            reBoxP[i].style.display = 'block'
        }
    })
})



/* 用户点击复选框,立即注册按钮变为蓝色,取消禁用状态 */
check.addEventListener('change', function () {
    if (check.checked) {
        regBtn.style.backgroundColor = '#00bdff'
        regBtn.disabled = false;
    } else {
        regBtn.style.backgroundColor = '#ccc'
        regBtn.disabled = true;
    }
})

/* 需求: 当输入内容时,clear按钮显示出来,如果内容为空,则隐藏 */
inputText.forEach(function(v,i){
    v.addEventListener('input',function(){
        clear[i].style.display = 'block'

        if(v.value === ''){
        clear[i].style.display = 'none'
        }
    })
})

/* 点击clear,相应的输入框内容也直接清除 */
clear.forEach(function(v,i){
    v.addEventListener('click',function(){
        inputText[i].value = ''
        v.style.display = 'none'
    })
})